<template>
  <div class="question">
    <header>
    <p v-text="firstText"></p>
    <p v-text="firstContent"></p>
    </header>
    <from>
      <h3 v-text="firstTitle"></h3>
      <div class="bgContent">
        <h4 v-text="text1"></h4>
        <label v-for="item in marriageList" :key="item.id">
          <input v-model="questionForm.marriage" type="radio" name="marriage" :value="item.radio1" />
          {{item.radio1}}
        </label>
      </div>
      <div class="bgContent">
        <h4 v-text="text2"></h4>
        <label v-for="item in ageList" :key="item.id">
          <input v-model="questionForm.age" type="radio" name="age" :value="item.radio2" />
          {{item.radio2}}<br/>
        </label>
      </div>
      <h3 v-text="secondTitle"></h3>
      <div class="bgContent">
        <h4 v-text="text3"></h4>
        <label v-for="item in workPositionList" :key="item.id">
          <input v-model="questionForm.workPosition" type="radio" name="workPosition" :value="item.radio3" />
          {{item.radio3}}<br/>
        </label>
      </div>
      <div class="bgContent">
        <h4 v-text="text4"></h4>
        <label v-for="item in workMatchList" :key="item.id">
          <input  v-model="questionForm.workMatch" type="radio" name="workMatch" :value="item.radio4" />
          {{item.radio4}}<br/>
        </label>
      </div>
      <div class="btn"><button @click="submitQuestion">提交</button></div>
    </from>
  </div>
</template>
<script>
export default {
  data () {
    return {
      firstText: '尊敬的同事:',
      firstContent: `您好!感谢熄在百忙之中填写问卷,
请根据自己的实际感受和看法如实填写,
本问卷采用匿名形式,所有数据仅供了解整体员工满意度情况,
不针对个别数据进行研究。`,
      firstTitle: '一、您的基本情况',
      text1: '1、您的婚姻情况:',
      text2: '2、您的年龄:',
      secondTitle: '二、对工作本身的满意度',
      text3: '1、您对本人的工作岗位是否感到满意?',
      text4: '2、您对您与工作的匹配程度是否满意?',
      marriageList: [
        { id: 1, radio1: 'A.未婚' },
        { id: 2, radio1: 'B.已婚未生育' },
        { id: 3, radio1: 'C.已婚已生育' }
      ],
      ageList: [
        { id: 1, radio2: 'A.25岁以下' },
        { id: 2, radio2: 'B.26—35岁' },
        { id: 3, radio2: 'C.26—35岁' },
        { id: 4, radio2: 'D.45岁以上' }
      ],
      workPositionList: [
        { id: 1, radio3: 'A.很满意' },
        { id: 2, radio3: 'B.满意' },
        { id: 3, radio3: 'C.一般' },
        { id: 4, radio3: 'D.不满意' },
        { id: 5, radio3: 'E.极不满意' }
      ],
      workMatchList: [
        { id: 1, radio4: 'A.很满意' },
        { id: 2, radio4: 'B.满意' },
        { id: 3, radio4: 'C.一般' },
        { id: 4, radio4: 'D.不满意' },
        { id: 5, radio4: 'E.极不满意' }
      ],
      // 表单
      questionForm: {
        marriage: '',
        age: '',
        workPosition: '',
        workMatch: ''
      }
    }
  },
  methods: {
    submitQuestion (e) {
      console.log(e)
      localStorage.setItem('questionForm', this.questionForm)
      console.log(this.questionForm)
    }
  }
}
</script>

<style lang="scss" scoped>
.question{
  height:100%;
  background-color: #eee;
  header{
    border-top:1mm solid #eee;
    background-color: #ffffff;
    padding:.625rem /* 10/16 */;
    color:rgb(128, 126, 126);
    p:nth-child(2){
      text-indent: 2em;
      letter-spacing: .125rem /* 2/16 */;
      line-height: 1.5625rem /* 25/16 */;
    }
  }
  .bgContent{
    background-color: #ffffff;
    padding:1.25rem /* 20/16 */ 0;
    border-bottom:1mm solid #eee;
  }
  .btn{
    background-color: #eee;
    width:100%;
    text-align: center;
    padding:1.25rem /* 20/16 */ 0;
    button{
      padding:.625rem /* 10/16 */  3.125rem /* 50/16 */;
      background-color: #00f;
      color:#ffffff;
      border:none;
      font-size: 1.5rem /* 24/16 */;
    }
    button:active:hover{
      background-color: #0f0 ;
    }
  }
}

</style>
